/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-12 09:05:56
 * @LastEditTime : 2023-06-20 15:32:15
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\WebHomeSetUp.jsx
 * @Description  :
 */

import './Scss/WebHomeSetUp.scss'
import { Http } from '../../../Api'
import GridLayout from 'react-grid-layout'
import { useBoolean, useLocalStorageState, useRequest, useSize } from 'ahooks'
import { useState, Fragment, useEffect, useRef } from 'react'
import { FloatButton, Drawer, Divider, Badge, message } from 'antd'
import { PlusOutlined, SaveOutlined } from '@ant-design/icons'

import { Invest001, Invest002, Invest003 } from './HomePage/Invest'
import { Secure001 } from './HomePage/Secure'
import { Train001 } from './HomePage/Train'
import { Supervision001 } from './HomePage/Supervision'
import { Laboratory001 } from './HomePage/Laboratory'
import { Machinery001 } from './HomePage/Machinery'
import { Camera001 } from './HomePage/Camera'
import { Personnel001, Personnel002 } from './HomePage/Personnel'
import { Tunnel001 } from './HomePage/Tunnel'
import { Progress001 } from './HomePage/Progress'
import { Sample001 } from './HomePage/Sample'
import { Quality001 } from './HomePage/Quality'

// 模块数据
export const TemplateData = {
    Invest001,
    Invest002,
    Invest003,
    Secure001,
    Train001,
    Supervision001,
    Laboratory001,
    Machinery001,
    Camera001,
    Personnel001,
    Personnel002,
    Tunnel001,
    Progress001,
    Sample001,
    Quality001,
}
// 模块默认参数
const TemplateDefault = {
    Invest001: { i: 'Invest001', x: 0, y: 0, w: 4, h: 2 },
    Invest002: { i: 'Invest002', x: 0, y: 0, w: 4, h: 2 },
    Invest003: { i: 'Invest003', x: 0, y: 0, w: 4, h: 2 },
    Secure001: { i: 'Secure001', x: 0, y: 0, w: 4, h: 2 },
    Train001: { i: 'Train001', x: 0, y: 0, w: 4, h: 2 },
    Supervision001: { i: 'Supervision001', x: 0, y: 0, w: 4, h: 2 },
    Laboratory001: { i: 'Laboratory001', x: 0, y: 0, w: 6, h: 2 },
    Machinery001: { i: 'Machinery001', x: 0, y: 0, w: 6, h: 2 },
    Camera001: { i: 'Camera001', x: 0, y: 0, w: 6, h: 2 },
    Personnel001: { i: 'Personnel001', x: 0, y: 0, w: 6, h: 2 },
    Personnel002: { i: 'Personnel002', x: 0, y: 0, w: 6, h: 2 },
    Tunnel001: { i: 'Tunnel001', x: 0, y: 0, w: 6, h: 2 },
    Progress001: { i: 'Progress001', x: 0, y: 0, w: 6, h: 2 },
    Sample001: { i: 'Sample001', x: 0, y: 0, w: 6, h: 2 },
    Quality001: { i: 'Quality001', x: 0, y: 0, w: 6, h: 2 },
}
// 模块选择列表
const TemplateList = {
    Invest: {
        title: '投资模块',
        child: { Invest001, Invest002, Invest003 },
    },
    Secure: {
        title: '安全巡检',
        child: { Secure001 },
    },
    Quality: {
        title: '质量巡检',
        child: { Quality001 },
    },
    Train: {
        title: '安全培训',
        child: { Train001 },
    },
    Supervision: {
        title: '监理工序',
        child: { Supervision001 },
    },
    Machinery: {
        title: '机械管理',
        child: { Machinery001 },
    },
    Laboratory: {
        title: '试验室数据',
        child: { Laboratory001 },
    },
    Camera: {
        title: '监控模块',
        child: { Camera001 },
    },
    Personnel: {
        title: '人员考勤',
        child: { Personnel001, Personnel002 },
    },
    Progress: {
        title: '形象进度',
        child: { Progress001 },
    },
    Tunnel: {
        title: '隧道管理',
        child: { Tunnel001 },
    },
    Sample: {
        title: '试验委托',
        child: { Sample001 },
    },
}

export const WebHomeSetUp = () => {
    const GridBox = useRef()
    const size = useSize(GridBox)
    const [messageApi, contextHolder] = message.useMessage()
    const [MoreStatus, { setTrue, setFalse }] = useBoolean(false)
    const [ClientData] = useLocalStorageState('ClientData')
    const { runAsync } = useRequest(Http, { manual: true })

    const [ActiveList, setActiveList] = useState([])

    const templateActive = (item, type) => {
        if (type) setActiveList([...ActiveList, TemplateDefault[item]])
        else setActiveList(ActiveList.filter(key => key.i !== item))
    }

    const submit = () => {
        const [uuid] = Object.keys(ClientData.project)
        runAsync({
            url: 'posSaveJsonInfoByUuid',
            data: JSON.stringify(JSON.stringify(ActiveList)),
            path: [`home${uuid}`],
        }).then(() => messageApi.success('首页保存成功,重新登录后更新样式.'))
    }

    useEffect(() => {
        const [uuid] = Object.keys(JSON.parse(localStorage.getItem('ClientData')).project)
        runAsync({ url: 'getJsonInfoByUuid', data: { uuid: `home${uuid}` } }).then(res => setActiveList(res || []))
    }, [runAsync])

    return (
        <div className="WebHomeSetUp">
            {contextHolder}
            {/* 展示用区域 */}
            <div className="Region" ref={GridBox}>
                {size && (
                    <GridLayout
                        className="layout"
                        layout={ActiveList}
                        isDroppable={true}
                        isResizable={true}
                        margin={[15, 15]}
                        cols={12}
                        rowHeight={150}
                        width={size.width}
                        onResizeStop={e => setActiveList(e)}
                        onDragStop={e => setActiveList(e)}
                    >
                        {ActiveList?.map(({ i }) => (
                            <div key={i} style={{ width: '100%', height: '100%' }}>
                                {(() => {
                                    const Template = TemplateData[i]
                                    return <Template />
                                })()}
                            </div>
                        ))}
                    </GridLayout>
                )}
            </div>
            {/* 模块选择区 */}
            <Drawer
                className="WebHomeSetUpDrawer"
                title="选择展示模块"
                placement="right"
                onClose={setFalse}
                open={MoreStatus}
                maskClosable={false}
                width={'80vw'}
            >
                <div className="TemplateDrawer">
                    {Object.keys(TemplateList).map(key => {
                        const { title, child } = TemplateList[key]
                        return (
                            <div key={key}>
                                <Divider className="Title" orientation="left">
                                    {title}
                                </Divider>
                                <div className="Template">
                                    {Object.keys(child).map(item => {
                                        const Template = TemplateList[key].child[item]
                                        const isActive = ActiveList.findIndex(v => v.i === item) !== -1
                                        return (
                                            <Fragment key={item}>
                                                {isActive ? (
                                                    <Badge.Ribbon text="已选">
                                                        <div
                                                            className="Box"
                                                            onClick={() => templateActive(item, false)}
                                                        >
                                                            <Template />
                                                        </div>
                                                    </Badge.Ribbon>
                                                ) : (
                                                    <div className="Box" onClick={() => templateActive(item, true)}>
                                                        <Template />
                                                    </div>
                                                )}
                                            </Fragment>
                                        )
                                    })}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </Drawer>
            {/* 添加按钮 */}
            <FloatButton icon={<PlusOutlined />} type="primary" style={{ top: 80, right: 80 }} onClick={setTrue} />
            <FloatButton icon={<SaveOutlined />} type="primary" style={{ top: 80 }} onClick={submit} />
        </div>
    )
}
